<template>
  <div class="container">
    <div class="left">
      <img class="lines" src="../assets/lines.png"/>
      <span class="title" @click="jump('/')">金星工作室</span>
    </div>
    <div class="right">
      <el-avatar v-if="showAvatar" :src="avatarSrc" class="avatar" @click.native="jump('/user')"></el-avatar>
      <div v-else>
        <span class="spanButton" @click="jump('/login')">登录</span>
        <span class="spanButton" @click="jump('/register')">注册</span>
      </div>
    </div>
  </div>
</template>

<script>
import storage from 'good-storage'

export default {
  name: 'headerComp',
  data () {
    return {
      showAvatar: false,
      avatarSrc: ''
    }
  },
  methods: {
    jump: function (router) {
      this.$router.push(router)
    }
  },
  created () {
    if (storage.session.has('user')) {
      let id = storage.session.get('user').id
      this.avatarSrc = 'http://localhost:10001/head/' + id.toString() + '.jpg'
      this.showAvatar = true
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, #5B4B00, #FFFCE0);
  background-position-y: -1px;
  box-shadow: 0px 0px 30px #888;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.left, .right{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right{
  padding-right: 10px;
}
span {
  color: black;
  cursor: pointer;
}
.title{
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 1.5em;
  color: #FF0033;
  -webkit-text-stroke: 1px black;
}
.lines{
  position: absolute;
  height: 40px;
  width: 200px;
}
</style>
